<template>
  <div class="addArticle">
    <div
      class="add-article"
      v-loading="loading"
      element-loading-text="文章发布中..."
    >
      <el-form
        ref="publishForm"
        label-position="top"
        :rules="rules"
        :model="formData"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :multiple="false"
            :on-change="uploadImg"
            :file-list="fileList"
          >
            <template #default>
              <el-icon><plus /></el-icon>
            </template>
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章描述" prop="explain">
          <el-input v-model="formData.explain"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <QuillEditor
            ref="myQuillEditor"
            theme="snow"
            v-model="formData.content"
            :options="editorOption"
          />
        </el-form-item>
      </el-form>
      <el-dialog v-model="dialogVisible">
        <img width="100%" :src="formData.img" alt="" />
      </el-dialog>
      <el-button type="primary" @click="publishArticle(publishForm)" plain
        >发布文章</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ref, reactive, toRefs, onMounted, toRaw } from "vue";
import { QuillEditor } from "@vueup/vue-quill";
import { uploadFile, addArticle } from "../utis/api";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
// 引入路由
const router = useRouter();
// 引入仓库
const store = useStore();
const dialogVisible = ref(false);
const loading = ref(false);
const myQuillEditor = ref();
const fileBtn = ref();
const fileList = ref([]);

const editorInit = reactive({
  skin_url: "tinymce/skins/ui/oxide",
  content_css: "tinymce/skins/content/default/content.css",
  height: 300,
  plugins: "link lists image code table wordcount",
  toolbar:
    "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
  branding: false,
  menubar: false,
  images_upload_handler: (blobInfo: any, success: any) => {
    const file = blobInfo.blob();

    const files = new window.File([file], file.name, { type: file.type });
    const formDataUp = new FormData();
    formDataUp.append("file", files);
    // console.log(files);

    let img = "";
    uploadFile(formDataUp).then((res) => {
      img = "http://8.141.145.150:3000" + res.data.url;
      success(img);
    });
  },
});
const formData = reactive({
  title: "",
  img: "",
  explain: "",
  content: "",
  image: "",
});
const rules = {
  title: [{ required: true, message: "文章标题不能为空", trigger: "blur" }],
  explain: [{ required: true, message: "文章描述不能为空", trigger: "blur" }],
  content: [{ required: true, message: "文章内容不能为空", trigger: "blur" }],
};
const uploadImg = (file: any) => {
  if (file) {
    let formDataUp = new FormData();
    formDataUp.append("file", file.raw);
    console.log(file.raw);

    uploadFile(formDataUp).then((res) => {
      formData.image = res.data._id;

      formData.img = "" + res.data.url;
    });
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-upload) {
  display: v-bind(upLoad);
}
</style>
